<template>
  <div style="padding-top:1.5rem;text-align: left">
    <TopNav title="HelpPage.bzzx" show_left="true"></TopNav>
    <div>
      <template v-for="item in data">
        <van-cell v-if="item.url == null || item.url.length<5" @click="handleClickViewHelpContent(item.content)" :title="item.title" is-link />
        <van-cell v-else :title="item.title" is-link :url="item.url"/>
      </template>
    </div>
    <nut-popup :overlay="false" position="bottom" closeable close-icon="cross" v-model="showHelpDetail" :style="{ height: '100%' }">
      <div class="review-box" v-html="curr_html">
      </div>
    </nut-popup>
  </div>
</template>

<script>
import Vue from 'vue';
import { Cell, CellGroup } from 'vant';
import 'vant/lib/cell/style';
import 'vant/lib/cell-group/style';

Vue.use(Cell);
Vue.use(CellGroup);
import TopNav from "../components/TopNav";

export default {
  name: 'HelpPage',
    components: {
      TopNav,
    },
    data () {
    return {
      data:{
      },
      curr_html:'',
      showHelpDetail:false,
    }
  },
    methods:{
      getData(){
          this.$axios.get(this.$api_url.get_help).then((res)=>{
              console.log(res);
              if(res.data){
                  this.data = res.data;
              }
          })
      },
      handleClickViewHelpContent(html){
          this.curr_html = html;
          this.showHelpDetail = true;
      },
    },
    mounted() {
      this.getData();
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .review-box{
    padding:1rem;
    text-align: left
  }
  .review-box img{
    max-width: 100%;
  }
</style>
